<template>
  <div class="divBox">
    <el-card class="box-card">
<!--      <el-form inline size="small" @submit.native.prevent>-->
<!--        <el-form-item class="el-form-item-align-right">-->
<!--          <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="openEdit()" v-has-permi="['admin:integral:save']">添加</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
      <el-table :data="listData.list" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
        <el-table-column align="center" label="邀请数量" prop="inviteCount" min-width="110"/>
        <el-table-column align="center" label="邀请奖励益联券" prop="inviteVoucher" min-width="110"/>
        <el-table-column align="center" label="邀请奖励抵用金" prop="offsetAmount" min-width="110"/>
        <el-table-column align="center" label="一级返佣比例" prop="brokerage" min-width="100"/>
        <el-table-column align="center" label="二级返佣比例" prop="brokerageTwo" min-width="100"/>
        <el-table-column align="center" label="市级抽成比例" prop="cityBili" min-width="120"/>
        <el-table-column align="center" label="区级抽比列比例" prop="areaBili" min-width="120"/>
        <el-table-column align="center" label="券和积分转换比例" prop="conversion" min-width="130"/>
        <el-table-column align="center" label="抽成比例" min-width="120" prop="transactionFeeRatio"/>
        <el-table-column align="center" label="会员价格" min-width="120" prop="vipPrice"/>
        <el-table-column align="center" label="会员奖励" min-width="120" prop="vipGive"/>
        <el-table-column align="center" label="更新时间" prop="updateTime" min-width="150">
        </el-table-column>
        <el-table-column label="操作" min-width="220" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" size="mini" type="primary" @click="openEdit(scope.row.id)"  v-has-permi="['admin:integral:save']">编辑</el-button>
            <el-button icon="el-icon-s-order" size="mini" type="primary" @click="openRecordEdit(scope.row.id)"  v-has-permi="['admin:integral:save']">编辑记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
        :visible.sync="editDialog.show"
        :title="editDialog.id? '编辑':'新增'"
        destroy-on-close
        :close-on-click-modal="false"
        width="800px">
      <edit
          v-if="editDialog.show"
          :id="editDialog.id"
          @hideEditDialog="hideEditDialog"
          ref="editForm"
      />
    </el-dialog>
    <el-dialog
        :visible.sync="editRecordDialog.show"
        title="记录"
        destroy-on-close
        :close-on-click-modal="false"
        width="1300px">
      <record
          v-if="editRecordDialog.show"
          :id="editRecordDialog.id"
          @hideRecordEditDialog="hideRecordEditDialog"
          ref="editForm"
      />
    </el-dialog>
  </div>
</template>

<script>
import edit from './edit.vue'
import record from './record.vue'
import {deleteRow, list, updateStatus} from "@/api/basicConfig";
import {checkPermi} from "@/utils/permission";

export default {
  components: { edit ,record},
  data() {
    return {
      listData: { list: [],count:0 },
      listPram: {
        page: 1,
        limit: 20,
      },
      editDialog:{
        show:false,
        id:null
      },
      tableLoading:false,
      editRecordDialog:{
        show:false,
        id:null
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    checkPermi,
    getList(){
      this.tableLoading=true
      list(this.listPram).then(res=>{
        this.listData.list=res;
      }).finally(()=>{})
      this.tableLoading=false;
    },
    openEdit(id=null){
      this.editDialog.id=id;
      this.editDialog.show=true
    },
    handlerDelete(id) {
      this.$confirm('确认删除该数据吗？').then(() => {
        const loading=this.$loading({text:'删除中',background:'rgba(255,255,255,.5)'})
        deleteRow(id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        }).finally(()=>{
          loading.close()
        })
      })
    },
    openRecordEdit(id=null){
      this.editRecordDialog.id=id;
      this.editRecordDialog.show=true
    },
    hideEditDialog() {
      this.editDialog.show = false
      this.getList()
    },
    hideRecordEditDialog() {
      this.editRecordDialog.show = false
      this.getList()
    },
    handleStatusChange(status,id){
      const loading=this.$loading({text:'更新中',background:'rgba(255,255,255,.5)'})
      updateStatus(id,status).then(()=>{
        this.$message.success('更新状态成功')
        this.getList()
      }).finally(()=>{
        loading.close()
      })
    },
  }
}
</script>

<style scoped lang="scss">

</style>
